import React, { useEffect, useState } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import Home from "../../../views/sandbox/home";
import RightList from "../../../views/sandbox/right-manage/rightlist";
import RoleList from "../../../views/sandbox/right-manage/rolelist";
import UserList from "../../../views/sandbox/user-manage";
import NoPermission from "../../../views/sandbox/nopermission";
import Audit from "../../../views/sandbox/audit-manage/audit";
import AuditList from "../../../views/sandbox/audit-manage/auditList";

import NewsAdd from "../../../views/sandbox/news-manage/newsAdd";
import NewsCategory from "../../../views/sandbox/news-manage/newsCate";
import NewsDraft from "../../../views/sandbox/news-manage/newsDraft";
import NewsPreview from "../../../views/sandbox/news-manage/newsPreview";
import NewsUpdate from "../../../views/sandbox/news-manage/newsUpdate";

import Published from "../../../views/sandbox/publish-manage/published";
import Sunset from "../../../views/sandbox/publish-manage/sunset";
import Unpublished from "../../../views/sandbox/publish-manage/unPublished";
import axios from "axios";
import { Spin } from "antd";
import { connect } from "react-redux";

const LocalRouterMap = {
  // 组件带入的方式也不一样，因此 LocalRouterMap array 的 value 要用<>包裹组件
  "/home": <Home />,
  "/user-manage/list": <UserList />,
  "/right-manage/role/list": <RoleList />,
  "/right-manage/right/list": <RightList />,
  "/news-manage/add": <NewsAdd />,
  "/news-manage/draft": <NewsDraft />,
  "/news-manage/category": <NewsCategory />,
  // 新闻草稿预览
  "/news-manage/preview/:id": <NewsPreview />,
  // 新闻编辑
  "/news-manage/update/:id": <NewsUpdate />,
  "/audit-manage/audit": <Audit />,
  "/audit-manage/list": <AuditList />,
  "/publish-manage/unpublished": <Unpublished />,
  "/publish-manage/published": <Published />,
  "/publish-manage/sunset": <Sunset />,
};

function NewRouter(props) {
  const [backRouteList, setBackRouteList] = useState([]);
  useEffect(() => {
    Promise.all([
      axios.get("http://localhost:5000/rights"),
      axios.get("http://localhost:5000/children"),
    ]).then((res) => {
      setBackRouteList([...res[0].data, ...res[1].data]);
      // console.log([...res[0].data, ...res[1].data]);
    });
  }, []);

  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem("token"));
  const checkRoute = (item) => {
    return (
      LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    );
  };
  const checkUserPermisson = (item) => {
    // 判断当前登录用户权限列表.includes(item.key)
    return rights.includes(item.key);
  };
  return (
    <Spin size="large" spinning={props.isLoading}>
      <Routes>
        {backRouteList.map((item) => {
          // 这两个判断主要是阻止用户通过地址栏搜索进行强制访问的
          if (checkRoute(item) && checkUserPermisson(item)) {
            return (
              <Route
                path={item.key}
                key={item.key}
                element={LocalRouterMap[item.key]}
              />
            );
          } else {
            return null;
          }
        })}

        {/* 若地址为http://localhost:3000/#/ 走下列路由 */}
        {/* <Route
        path="/"
        element={
          <Navigate replace from="/" to="/home" element={<Home />}></Navigate>
        }
      ></Route> */}
        <Route path="/" element={<Navigate replace from="/" to="/home" />} />
        {/* 若地址为http://localhost:3000/#/xxxx（xxx为不存在的路由地址，即不是预定好的路由） 则走下列路由 */}
        <Route path="/*" element={<NoPermission />} />
      </Routes>
    </Spin>
  );
}

const mapStateToProps = ({ LoadingReducer: { isLoading } }) => ({
  isLoading,
});
export default connect(mapStateToProps)(NewRouter);
